<script setup>
import { ref } from 'vue'

// 组件逻辑
// 此处声明一些响应式状态
const message = ref('')
const count = ref(0)
const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function increment(){
    count.value ++ //加1
}
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

message.value = 'nihao' // 一定要写value
</script>
<template>
  <h1>{{message}}!</h1>
  <div>
   <button @click="increment">
    {{ count }}
  </button>
  </div>
  <div>
    <button @click="mutateDeeply">{{obj.nested.count}} {{ obj.arr }}</button>
  </div>
</template>

